<style scope>
	.selectItem {
		width: 25%;
		text-align: center;
	}

	.notSelectItem {
		width: 25%;
		text-align: center;
	}

	.top {
		position: fixed;
		background-color: #000000;
		width: 25%;
		color: #FFFFFF;
		height: 43.75rem;
	}
</style>
<template>
	<div>
		<!--table-->

		<el-row :gutter="24">
			<el-col :span="DEBUG?16:24">
				<basic-container>
					<avue-crud :option="option4" :data="data" :page.sync="page" @size-change="sizeChange"
						@row-del="delChange" @row-update="editChange" @row-save="addChange"
						@current-change="currentChange" @search-change="searchChange"
						@selection-change="selectionChange">
						<template slot-scope="scope" slot="menu">
							<el-button style="margin-left:0.9375rem;"
								class="el-button el-button--primary el-button--small" type="button"
								icon="el-icon-search" @click="showDetail(scope.row,scope.index)">
							</el-button>
							<el-button style="margin-left:0.9375rem;margin-top: 0.625rem;"
								class="el-button el-button--primary el-button--small" type="button" icon="el-icon-open"
								@click="control(scope.row,scope.index)">
							</el-button>

							<el-button style="margin-left:0.9375rem;margin-top: 0.625rem;"
								class="el-button el-button--primary el-button--small" type="button"
								icon="el-icon-setting" @click="configure(scope.row,scope.index)">
							</el-button>


							<el-button style="margin-left:0.9375rem;margin-top: 0.625rem;"
								class="el-button el-button--primary el-button--small" type="button"
								icon="el-icon-delete-solid" @click="delChange(scope.row,scope.index)">
							</el-button>

						</template>
						<template slot="menuLeft" slot-scope="{size}">
							<el-button style="margin-left:10px;" class="el-button el-button--primary el-button--small"
								type="button" icon="el-icon-menu" @click="settingConfig">{{$t("wel.table.configure")}}
							</el-button>
							<el-button style="margin-left:10px;" class="el-button el-button--primary el-button--small"
								type="button" icon="el-icon-refresh" @click="reboot">{{$t("wel.table.Set_restart")}}
							</el-button>
							<el-button style="margin-left:10px;" class="el-button el-button--primary el-button--small"
								type="button" icon="el-icon-s-grid" @click="reload">{{$t("wel.table.Restore_factory")}}
							</el-button>
						</template>
					</avue-crud>
				</basic-container>
			</el-col>
			<el-col :span="DEBUG?8:0">
				<textarea class="top" v-model="logText" disabled></textarea>
			</el-col>
		</el-row>



		<!--设备详情页面-->
		<el-dialog :title="$t('wel.table.device_details')" :visible.sync="isDetail" v-dialogdrag
			:class="{ 'avue-dialog': type == 0 }" width="80%">
			<el-menu default-active="2" mode="horizontal" background-color="#409EFF" text-color="#303133"
				active-text-color="#ffd04b" class="margin-top:10px">
				<el-menu-item :class="selectTap=='detail'?'selectItem':'notSelectItem'"
					@click="selectTapClick('detail')">
					{{$t("wel.table.detail")}}
				</el-menu-item>
				<el-menu-item :class="selectTap=='control'?'selectItem':'notSelectItem'"
					@click="selectTapClick('control')">
					{{$t("wel.table.control")}}
				</el-menu-item>
				<!-- <el-menu-item :class="selectTap=='map'?'selectItem':'notSelectItem'" @click="selectTapClick('map')">
					{{$t("wel.table.trajectory")}}
				</el-menu-item> -->
				<el-menu-item :class="selectTap=='line'?'selectItem':'notSelectItem'" @click="selectTapClick('line')">
					{{$t("wel.table.Online_history")}}
				</el-menu-item>
				<!-- <el-menu-item :class="selectTap=='csq'?'selectItem':'notSelectItem'" @click="selectTapClick('csq')">
					{{$t("wel.table.signal_intensity")}}
				</el-menu-item> -->
				<el-menu-item :class="selectTap=='setting'?'selectItem':'notSelectItem'"
					@click="selectTapClick('setting')">
					{{$t("wel.table.configure")}}
				</el-menu-item>
			</el-menu>
			<el-row :span="24" style="margin-top: 10px;">
				<el-col :span="24">
					<div>
						<detail v-if="selectTap=='detail'" v-bind:id=detail.id></detail>
						<control v-if="selectTap=='control'" v-bind:id=detail.id></control>
						<gdmap v-if="selectTap=='map'" v-bind:id=detail.id></gdmap>
						<online v-if="selectTap=='line'" v-bind:id=detail.id></online>
						<csq v-if="selectTap=='csq'" v-bind:id=detail.id></csq>
						<addr v-if="selectTap=='gps'" v-bind:id=detail.id></addr>
						<setting v-if="selectTap=='setting'" v-bind:id=detail.id></setting>
					</div>
				</el-col>
			</el-row>
		</el-dialog>



		<!--删除弹框-->
		<el-dialog :title="$t('wel.table.Delete_prompt')" :visible.sync="box" v-dialogdrag
			:class="{ 'avue-dialog': type == 0 }" width="40%">
			<span>{{$t("wel.table.isDelete")}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="box = false">{{$t("wel.table.cancel")}}</el-button>
				<el-button type="primary" @click="delSubmit">{{$t("wel.table.determine")}}</el-button>
			</span>
		</el-dialog>
		<!--重启弹框-->
		<el-dialog :title="$t('wel.table.Restart_prompt')" :visible.sync="isReboot" v-dialogdrag
			:class="{ 'avue-dialog': type == 0 }" width="40%">
			<span>{{$t('wel.table.reloadMessage')}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isReboot = false">{{$t("wel.table.cancel")}}</el-button>
				<el-button type="primary" @click="RebootSubmit">{{$t("wel.table.determine")}}</el-button>
			</span>
		</el-dialog>

		<!--恢复出厂弹框-->
		<el-dialog :title="$t('wel.table.ResumeFactoryTips')" :visible.sync="isReload" v-dialogdrag
			:class="{ 'avue-dialog': type == 0 }" width="40%">
			<span>{{$t('wel.table.ResumeFactory')}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isReload = false">{{$t("wel.table.cancel")}}</el-button>
				<el-button type="primary" @click="ReloadSubmit">{{$t("wel.table.determine")}}</el-button>
			</span>
		</el-dialog>

		<!--设置form-->
		<el-dialog title="批量设置" :visible.sync="isSetting" v-dialogdrag :class="{ 'avue-dialog': type == 0 }"
			width="60%">

		</el-dialog>

		<el-dialog :title="$t('wel.table.Batch_settings')" :visible.sync="isConfig" v-dialogdrag
			:class="{ 'avue-dialog': type == 0 }" width="80%">
			<avue-form :option="optionConfig" ref="configFrom" v-model="config" @submit="ConfigSubmit"></avue-form>

		</el-dialog>

		<!--设置form-->
		<el-dialog :title="$t('wel.table.Firmware_Update')" :visible.sync="isUpdate" v-dialogdrag
			:class="{ 'avue-dialog': type == 0 }" width="40%">
			<avue-form :option="optionUpdate" v-model="form1" @submit="UpdateVersionSubmit"></avue-form>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import request from "@/router/axios";
	import gdmap from "./map";
	import online from "./online";
	import addr from "./addr";
	import csq from "./csq";
	import setting from "./setting";
	import control from "./control";
	import detail from "./detail";
	import mqtt from 'mqtt'
	import {
		DEBUG,
		baseUrl,
		MQTT_SERVICE,
		MQTT_USERNAME,
		MQTT_PASSWORD
	} from '@/config/env';
	var client;
	var clientId = Math.floor(Math.random() * (9999999 - 1000000) + 1000000)

	const options = {
		connectTimeout: 40000,
		clientId: "user" + clientId,
		username: MQTT_USERNAME,
		password: MQTT_PASSWORD,
		clean: true
	}
	const typeList = [];
	export default {
		components: {
			gdmap,
			online,
			addr,
			csq,
			setting,
			control,
			detail,
		},
		name: "wel",
		data() {
			return {
				logText: "",
				userInfo: {},
				language: this.$t("wel.table"),
				UnvarnishedList: '', //透传历史数据
				Unvarnished: "", //透传指令
				isUnvarnished: false, //设备透传开关
				isReboot: false, //重启开关
				isReload: false, //恢复出厂开关
				selectTap: 'map',
				message: "",
				at: "",
				isInstructions: false,
				config: {
					"proc": 0
				},
				isConfig: false,
				isUpdate: false,
				form: {},
				isSetting: false,
				detail: [],
				isDetail: false,
				searchEquipment: "",
				searchText: "",
				searchForm: {},
				Equipment: [], //所有项目分组
				updateData: [],
				update: false,
				data: [],
				selectItem: [],
				type: "",
				box: false,
				typeId: 0,
				page: {
					currentPage: 1,
					total: 0,
					layout: "total,pager,prev, next",
					background: false,
					pageSize: 10,
				},
				form1: {
					version: [],
				},
				optionUpdate: {
					column: [{
						label: this.$t("wel.table.version"),
						prop: 'select',
						type: 'select',
						rules: [{
							required: true,
							trigger: "blur"
						}],
						dicData: [],
					}, ],
				},
				optionConfig: {
					labelWidth: 200,
					column: [{
							label: this.$t("wel.table.keepAliveTime"),
							prop: 'keepAliveTime',
							type: 'number',
							row: true,
							minRows: 0,
							maxRows: 3600,
							rules: [{
								required: true,
								trigger: "blur"
							}],
							dicData: [],
						},
						{

							label: this.$t("wel.table.keepAliveDate"),
							prop: 'keepAliveDate',
							row: true,
							type: 'input',
							dicData: [],
						},
					],
				},
				delval: null,
				updateContent: {
					emptyBtn: false,
					submitBtn: false,
					column: [{
						label: this.$t("wel.table.version"),
						prop: "typeId",
						filter: false,
						type: "tree",
						dicData: typeList,
						rules: [{
							required: true,
							trigger: "blur",
						}, ],
					}, ],
				},
			};
		},

		//监听变化
		watch: {},

		computed: {
			option4() {
				return {
					editBtn: true,
					editTitle: "修改",
					delBtn: false,
					selection: true,
					reserveSelection: true,
					align: "center",
					menuAlign: "center",
					menuType: "icon",
					column: [{
							label: this.$t("wel.table.name"),
							prop: "pid",
							addDisplay: true,
							editDisplay: true,
							type: "select",
							filter: false,
							dicData: this.Equipment,
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: this.$t("wel.table.HardwareName"),
							prop: "tname",
							hide: true,
							addDisplay: false,
							editDisplay: false,

						},
						{
							label: this.$t("wel.table.HardwareModel"),
							prop: "model",
							addDisplay: false,
							editDisplay: false,
						},
						{
							label: this.$t("wel.table.devname"),
							prop: "name",
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							width: 200,
							label: this.$t("wel.table.code"),
							prop: "code",
							editDisabled: true,
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: this.$t("wel.table.create_time"),
							prop: "create_time",
							addDisplay: false,
							editDisplay: false,
						},
						{
							label: this.$t("wel.table.start"),
							prop: "start",
							addDisplay: false,
							editDisplay: false,
						},
						{
							label: this.$t("wel.table.remarks"),
							prop: "remarks",
						},
						{
							label: this.$t("wel.table.version"),
							prop: "version",
							addDisplay: false,
							editDisplay: false,
						}

					],
				};
			},
		},

		created() {
			//获取分组信息
			this.getUserinfo();
			this.equipment();
			this.getList({
				page: 1,
				pageSize: this.page.pageSize,
			});
		},




		methods: {

			getUserinfo() {
				let that = this;
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + '/api/user/userinfo',
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info)
						} else if (response.data.status == 1) {
							that.userInfo = response.data.data;
							// mqtt连接

							that.mqttMSG();
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
			},

			mqttMSG() {
				let deviceMessage = ["getAIStatusRsp", "postSysInfo", "reqSysInfoRsp", "cfgSysParamsRsp", "keepAlive",
					"cfgDOParamsRsp", "reqDOParamsRsp",
					"setDOStatusRsp", "getDOstatusRsp", "cfgDIParamsRsp", "reqDIParamsRsp", "getDIstatusRsp",
					"postDIInfo", "cfgAIParamsRsp", "reqAIParamsRsp",
					"getAIstatusRsp", "cfgPWMParamsRsp", "reqPWMParamsRsp", "setPWMStatusRsp", "getPWMstatusRsp",
					"cfgUARTParamsRsp", "reqUARTParamsRsp", "revUARTData"
				];
				let userMessage = ["reqSysInfo", "cfgSysParams", "getSysParams", "getSysParamsRsp", "cfgDOParams",
					"reqDOParams", "setDOStatus", "getDOStatus", "cfgDIParams", "reqDIParams", "getDIStatus",
					"cfgAIParams", "reqAIParams", "getAIStatus", "cfgPWMParams", "reqPWMParams", "setPWMStatus",
					"getPWMStatus", "cfgUARTParams", "reqUARTParams", "sendUARTData", "reboot", "reload"
				]
				let that = this;
				console.log("准备连接MQTT");
				if (!mqtt.connected) {
					client = mqtt.connect(MQTT_SERVICE, options)
				}
				client.on('connect', (e) => {
					console.log('连接成功:')

				})
				// 接收消息处理
				client.on('message', (topic, message) => {
					var data = JSON.parse(message)
					console.log(data.method);
					if (deviceMessage.indexOf(data.method) != -1) {
						this.logText = this.logText + "↑  消息主题    " + topic + "\r\n";
						this.logText = this.logText + "   消息内容    " + JSON.stringify(data) + "\r\n\r\n";
					} else if (userMessage.indexOf(data.method) != -1) {
						this.logText = this.logText + "↓  消息主题    " + topic + "\r\n";
						this.logText = this.logText + "   消息内容    " + JSON.stringify(data) + "\r\n\r\n";
					}
				})
				// 断开发起重连
				client.on('reconnect', (error) => {
					console.log('正在重连:', error)
				})
				// 链接异常处理
				client.on('error', (error) => {
					console.log('连接失败:', error)
				})
			},

			UpdateVersionSubmit() {},
			//切换选项
			selectTapClick(top) {
				this.selectTap = top;
			},
			erverdayOnchange() {
				this.at = this.erverdaySelect;
			},


			//点击设备重启按钮
			reboot() {
				let that = this;
				var check = that.modelCheck();
				if (check !== true) {
					that.$message.error(check);
					return;
				}
				that.isReboot = true;
			},

			//点击恢复出厂按钮
			reload() {
				let that = this;
				var check = that.modelCheck();
				if (check !== true) {
					that.$message.error(check);
					return;
				}
				that.isReload = true;
			},

			//点击确认重启
			RebootSubmit() {
				let that = this;
				var items = [];
				that.selectItem.forEach(function(item, index) {
					items.push(item.id);
				})
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "/api/device/reboot",
						data: {
							"message": this.at,
							'id': items
						}
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
							return;
						} else if (response.data.status == 1) {
							that.$message.success(that.$t('wel.table.settingSuccess'));
							that.isReboot = false;
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error("系统错误");
					});
			},
			//点击确认恢复出厂
			ReloadSubmit() {
				let that = this;
				var items = [];
				that.selectItem.forEach(function(item, index) {
					items.push(item.id);
				})
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "/api/device/reload",
						data: {
							"message": this.at,
							'id': items
						}
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
							return;
						} else if (response.data.status == 1) {
							that.$message.success(that.$t('wel.table.settingSuccess'));
							that.isReload = false;
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error("系统错误");
					});
			},




			//校验
			modelCheck() {
				if (this.selectItem.length == 0) {
					return this.$t("wel.table.selectContent");
				}
				//获取设备型号
				let that = this;
				var typeId = -1;
				that.selectItem.forEach(function(item, index) {
					if (typeId == -1) {
						typeId = item.typeId;
					} else if (typeId != item.typeId) {
						typeId = false;
						return;
					} else {
						typeId = item.typeId;
					}
				})
				if (typeId == false) {
					return "请选择同种设备类型进行固件更新";

				}
				that.typeId = typeId;
				return true;
			},

			//点击批量设置
			settingConfig() {
				let that = this;
				//清空默认选项
				for (let key in that.form1) {
					that.form1[key] = undefined;
				}

				var check = that.modelCheck();
				if (check !== true) {
					that.$message.error(check);
					return;
				}
				//获取该型号的链路数量
				that.isConfig = true;
			},


			//点击批量配置
			ConfigSubmit(from, done) {
				var items = [];
				this.selectItem.forEach(function(item, index) {
					items.push(item.id);
				})
				let that = this;
				//提交数据

				console.log(from)

				//设置socket_type
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "/api/device/configSubmit",
						data: {
							'keepAliveTime': from.keepAliveTime,
							'keepAliveDate': from.keepAliveDate,
							'id': items
						}
					})
					.then(function(response) {
						if (response.data.status == 0) {

							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							done();
							that.$message.success(that.$t('wel.table.settingSuccess'));
						}
					})
					.catch(function(error) {
						that.$message.error(that.$t("wel.table.System_error"));
					});

			},


			//批量设置提交
			settingSubmit(form, done) {
				var items = [];
				this.selectItem.forEach(function(item, index) {
					items.push(item.id);
				})
				let that = this;
				console.log(this.form);
				//提交数据
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "userapi/Equipment/settingStatus",
						data: {
							"parity": this.form.Parity,
							"baud": this.form.baud,
							"stop": this.form.stop,
							"DataBits": this.form.DataBits,
							'id': items
						}
					})
					.then(function(response) {
						if (response.data.status == 0) {

							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							done();
							that.$message.success(that.$t('wel.table.settingSuccess'));
						}
					})
					.catch(function(error) {
						that.$message.error(that.$t("wel.table.System_error"));
					});

			},

			//点击批量设置
			settingStatus() {
				let that = this;
				//清空默认选项
				for (let key in that.form1) {
					that.form1[key] = undefined;
				}

				var check = this.modelCheck();
				if (check !== true) {
					this.$message.error(check);
					return;
				}
				this.isSetting = true;
			},

			//多选操作时触发
			selectionChange(list) {
				this.selectItem = list;
			},
			//点击查看控制
			control(row, index) {
				let item = {
					component: "views/device/control",
					icon: "icon-caidan",
					id: 21,
					label: "设备控制",
					meta: {
						i18n: "control",
						keepAlive: false
					},
					path: "/device//device/control"
				}
				//跳转详情页面
				if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
				this.$router.$avueRouter.group = item.group;
				this.$router.$avueRouter.meta = item.meta;
				console.log(row.id);
				this.$router.push({
					path: this.$router.$avueRouter.getPath({
						name: item['label'],
						src: item['path'],
						query: {
							id: row.id
						}
					}, item.meta),
					query: {
						id: row.id
					}
				});

				return;
			},

			//点击进入设备配置
			configure(row, index) {
				let item = {
					component: "views/device/setting",
					icon: "icon-caidan",
					id: 21,
					label: "设备控制",
					meta: {
						i18n: "setting",
						keepAlive: false
					},
					path: "/device//device/setting"
				}
				//跳转详情页面
				if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
				this.$router.$avueRouter.group = item.group;
				this.$router.$avueRouter.meta = item.meta;
				console.log(row.id);
				this.$router.push({
					path: this.$router.$avueRouter.getPath({
						name: item['label'],
						src: item['path'],
						query: {
							id: row.id
						}
					}, item.meta),
					query: {
						id: row.id
					}
				});

				return;
			},


			//点击查看详情触发
			showDetail(row, index) {
				let item = {
					component: "views/device/detail",
					icon: "icon-caidan",
					id: 20,
					label: "设备详情",
					meta: {
						i18n: "device_details",
						keepAlive: false
					},
					path: "/device//device/detail"
				}
				//跳转详情页面
				if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
				this.$router.$avueRouter.group = item.group;
				this.$router.$avueRouter.meta = item.meta;
				console.log(row.id);
				this.$router.push({
					path: this.$router.$avueRouter.getPath({
						name: item['label'],
						src: item['path'],
						query: {
							id: row.id
						}
					}, item.meta),
					query: {
						id: row.id
					}
				});
			},


			//刷新更新设备状态
			updateStatus(row, index) {
				let that = this;
				//提交数据
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "userapi/Equipment/updateStatus",
						data: {
							id: row.id
						},
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							that.$message.success(that.$t('wel.table.Operation_succeeded'));
							that.isSetting = false;
						}
					})
					.catch(function(error) {
						that.$message.error(that.$t("wel.table.System_error"));
					});
			},

			//点击搜索触发
			search() {
				this.getList({
					str: this.searchText,
					pid: this.searchEquipment,
					pageSize: 10,
					page: 1,
				});
			},


			equipment() {
				let that = this;
				//提交数据
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "/api/device/getAll",
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							that.Equipment = response.data.data;
						}
					})
					.catch(function(error) {
						that.$message.error(that.$t("wel.table.System_error"));
					});
			},

			tip(val, index) {
				//获取当前设备可用版本号
				this.update = true;
			},

			handleEmpty() {
				this.$refs.form.resetForm();
			},

			handleSubmit() {
				let that = this;
				that.$refs.form.validate((vaild, done) => {
					if (vaild) {
						//提交数据
						request({
								headers: {
									"Content-Type": "application/json;charset=utf-8",
								},
								method: "post",
								url: baseUrl + "userapi/Equipment/addVersion",
								data: that.obj0,
							})
							.then(function(response) {
								if (response.data.status == 0) {
									that.$message.error(response.data.info);
								} else if (response.data.status == 1) {
									that.$message.success(that.$t('wel.table.Operation_succeeded'));
									that.add = false;
									that.getList({
										page: 1,
										pageSize: that.page.pageSize,
									});
								}
							})
							.catch(function(error) {
								that.$message.error(that.$t("wel.table.System_error"));
							});
					}
				});
			},
			searchChange(params, done) {
				if (!params) {
					this.$message.err(this.$t("wel.table.emptyContent"));
				}
				done();
				this.getList({
					id: params["id"],
					name: params["name"],
					code: params["code"],
					pageSize: 10,
					page: 1,
				});
			},
			sizeChange(val) {
				this.page.currentPage = 1;
				this.page.pageSize = val;
				this.getList();
			},

			currentChange(val) {
				this.page.currentPage = val;
				this.getList({
					page: val,
					pageSize: this.page.pageSize,
				});
			},
			delChange(val, index) {
				let that = this;
				this.box = true;
				this.delval = val;
				return;
			},

			delSubmit() {
				let that = this;
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "/api/device/deviceDel",
						data: that.delval,
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							that.$message.success(that.$t('wel.table.Operation_succeeded'));
							that.getList({
								page: that.page.currentPage,
								pageSize: that.page.pageSize,
							});
						}
					})
					.catch(function(error) {
						that.$message.error(that.$t("wel.table.System_error"));
					});
				that.box = false;
			},

			addChange(val, done, loading) {
				let that = this;
				if (val.name == "") {
					that.$message.error(that.$t("wel.table.emptyName"));
					loading();
					return;
				}
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "/api/device/deviceAdd",
						data: val,
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
							loading();
						} else if (response.data.status == 1) {
							that.$message.success(that.$t('wel.table.Operation_succeeded'));
							that.getList({
								page: that.page.currentPage,
								pageSize: that.page.pageSize,
							});
							done();
						}
					})
					.catch(function(error) {
						console.log(error)
						loading();
						that.$message.error(that.$t("wel.table.System_error"));
					});
			},

			editChange(val, index, done, loadding) {
				let that = this;
				if (val.name == "") {
					that.$message.error(that.$t("wel.table.emptyName"));
					loadding();
					return;
					
				}
				if (val.code == "") {
					that.$message.error(that.$t("wel.table.emptyCode"));
					loadding();
					return;
					
				}
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "/api/device/deviceUpdate",
						data: val,
					})
					.then(function(response) {
						done();
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							that.$message.success(that.$t('wel.table.Operation_succeeded'));
							that.getList({
								page: that.page.currentPage,
								pageSize: that.page.pageSize,
							});
						}
					})
					.catch(function(error) {
						console.log(error);
						done();
						that.$message.error(that.$t("wel.table.System_error"));
					});
			},

			getList(data) {
				let that = this;
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "/api/device/content",
						data: data,
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							that.data = response.data.data.data;
							that.data.forEach(function(item, index) {
								that.data[index].start = item.start == 1 ? that.$t("wel.table.online") : that
									.$t("wel.table.off_line");
							});
							that.page.total = response.data.data.total;
							that.page.pageSize = response.data.data.per_page;
							if (DEBUG) {
								response.data.data.data.forEach(function(item, index) {
									client.subscribe('all/' + item.code + "/#", {
										qos: 1
									}, (error) => {
										if (error) {
											console.log(item.code + '订阅失败')
										}
									})
								})
							}
						}
					})
					.catch(function(error) {
						that.$message.error(that.$t("wel.table.System_error"));
					});
			},
		},
	};
</script>
